<template>
    <i-form ref="formvalidate" :label-width="80" :model="formValidate" :rules="ruleValidate">
        <Form-item label="角色名" prop="name">
            <i-input v-model="formValidate.name" placeholder="请输入姓名"></i-input>
        </Form-item>
        <Form-item label="角色昵称" prop="displayName">
            <i-input v-model="formValidate.displayName" placeholder="请输入角色昵称"></i-input>
        </Form-item>
        <!-- <Form-item label="任务人员" prop="city">
            <i-select :model.sync="formValidate.city" placeholder="请选择所在地">
                <i-option value="beijing">北京市</i-option>
                <i-option value="shanghai">上海市</i-option>
                <i-option value="shenzhen">深圳市</i-option>
            </i-select>
        </Form-item> -->
         <Form-item label="任务人员" >
            <Select v-model="formValidate.normalizedName" multiple style="width:260px" prop="displayName">
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <Form-item label="起始时间">
            <Row>
                <i-col span="11">
                    <Form-item >
                        <Date-picker type="date" placeholder="选择日期" v-model="formValidate.description"></Date-picker>
                    </Form-item>
                </i-col>
            </Row>
        </Form-item>
        <Form-item label="激活角色" prop="isStatic">
            <RadioGroup v-model="formValidate.isStatic">
              <Radio label=true>是</Radio>
              <Radio label=false>否</Radio>
          </RadioGroup>
        </Form-item>
        <Form-item label="角色描述">
            <i-input v-model="formValidate.permissions" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入相关内容，不能少于20字。。。"></i-input>
        </Form-item>
        <Form-item>
            <i-button type="primary" @click="handleSubmit">提交</i-button>
            <i-button type="ghost" @click="handleReset" style="margin-left: 8px">重置</i-button>
        </Form-item>
    </i-form>
</template>
<script>
import Util from "../../../libs/util";
// import axios from 'axios'
// axios.defaults.baseURL = '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
export default {
  data() {
    return {
      formValidate: {
        name: "",
        displayName: "",
        normalizedName: [],
        description: "",
        isStatic: "",
        permissions: ""
      },
      ruleValidate: {
        name: [{ required: true, message: "任务名不能为空", trigger: "blur" }],
        displayName: [
          { required: true, message: "负责人姓名不能为空", trigger: "blur" }
          // { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        normalizedName: [
          { required: true, message: "请选择任务成员", trigger: "change" }
        ],
        isStatic: [
          { required: true, message: "请选择是否激活任务", trigger: "change" }
        ],
        // interest: [
        //     { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
        //     { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
        // ],
        description: [
          {
            required: true,
            type: "date",
            message: "请选择日期",
            trigger: "change"
          }
        ],
        permissions: [
          { required: true, message: "请输入任务简介", trigger: "blur" },
          {
            type: "string",
            min: 20,
            message: "介绍不能少于20字",
            trigger: "blur"
          }
        ]
      },
      cityList: [
        {
          value: "zs",
          label: "张三"
        },
        {
          value: "LS",
          label: "李四"
        },
        {
          value: "WW",
          label: "王五"
        },
        {
          value: "ZL",
          label: "赵六"
        }
      ]
    };
  },
  methods: {
    handleSubmit() {
      let obj = {
        name: this.formValidate.name,
        displayName: this.formValidate.displayName,
        normalizedName: this.formValidate.name.toLocaleUpperCase(),
        description: '',
        isStatic: true,
        permissions: []
      };
      this.$refs.formvalidate.validate(valid => {
        if (valid) {
          console.log(obj);
          Util.ajax.post("/api/services/app/Role/Create", obj).then(result => {
            console.log(result);
            this.$Message.success("创建成功!");
          });
        } else {
          this.$Message.error("表单验证失败!");
        }
        console.log(this.formValidate.animal);
      });
    },
    handleReset() {
      this.$refs.formvalidate.resetFields();
    //   let obj = {
    //     userName: 'zs123',
    //     name: 'z',
    //     surname: "s",
    //     emailAddress: '78956@.com',
    //     password: '123456789'
    //   };
    //   Util.ajax.post(" /api/services/app/User/Create", obj).then(result => {
    //         console.log(result);
    //         // this.$Message.success("提交成功!");
    //         alert('创建成功')
            
    //       });
    }
  }
};
</script>
